<script setup>
import { ref, reactive, toRefs, onBeforeMount } from 'vue'
import { listClusterHandler as listHandler, deleteClusterHandler as deleteHandler, getClusterHandler as getDetail, getClusterDetailHandler } from '../../api/cluster.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Check, Close } from '@element-plus/icons-vue'
import Add from './Add.vue'


const data = reactive({
    items: [],
    clusterDetail: [],
    itemForm: {
        clusterId: "",
        displayName: "",
        city:"",
        district: "",
        version: "",
        status: "",
        kubeconfig: ""
    },
    detailId: ""
})
const loading = ref(true)
const addUserDialog = ref(false)
const defaultMethod = ref("Create")

// 获取集群列表
const getList = () => {
    loading.value = true
    listHandler().then((response) => {
        data.items = response.data.data.items
        loading.value = false
    })
}


// 删除集群
const deleteCluster = (row) => {
    ElMessageBox.confirm(
        '你确定要删除集群:' + row.clusterId,
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        loading.value = true
        deleteHandler(row.clusterId).then((response) => {
            ElMessage({
                message: response.data.message,
                type: "success"
            })
            getList()
        })
    }).catch(() => {
        return
    })
    
}
// 添加用户的方法
const add = () => {
    data.itemForm = {}
    defaultMethod.value = "Create"
    addUserDialog.value = true
}
// 更新用户的方法
const edit = (clusterId) => {
    loading.value = true
    console.log("编辑集群:",clusterId)
    // 获取当前集群详情
    getDetail(clusterId).then((response) => {
        data.itemForm = response.data.data.items
        console.log("获取到集群详情:",response.data.data.items)
        // getlist()
        defaultMethod.value = "Edit" // 编辑的dialog打开
        addUserDialog.value = true
        loading.value = false
    })
}
onBeforeMount(() => {
    getList()
})
const closeDialog = () => {
    getList()
}
const rollback = () => {
    addUserDialog.value = false
    getList()
}

const detailDialog = ref(false)
// 展示数据的方法
const detail = async (clusterId, displayName) => {
  data.detailName = displayName
  data.detailId = clusterId
  await getClusterDetailHandler(clusterId).then((res) => {
    data.clusterDetail = res.data.data.items
    console.log("clusterDetail:", res.data.data.items)
  })
  detailDialog.value= true
}


const { items, itemForm, clusterDetail, detailId } = toRefs(data)
</script>

<template>
    <el-card class="box-card">
    <template #header>
        <div class="card-header">
        <span>集群列表</span>
        <el-button class="button" @click="add()" type="primary">添加</el-button>
        </div>
    </template>
    <!-- 真实数据 -->
        <el-table :data="items" style="width: 100%" height="500" stripe border>
            <el-table-column fixed prop="" label="集群ID" width="180" align="center">
                <template #default="scope">
                    <el-button link type="primary"  @click="detail(scope.row.clusterId,displayName)">{{ scope.row.clusterId }}</el-button>
                </template>
            </el-table-column>
            <el-table-column fixed prop="displayName" label="集群别名" width="180" align="center"/>
            <el-table-column fixed prop="version" label="版本" width="90" align="center" sortable/>

            <el-table-column fixed prop="city" label="位置" width="180"  align="center">
                <template #default="scope">{{ scope.row.city }} - {{ scope.row.district }}</template>
            </el-table-column>
            <el-table-column fixed prop="" label="状态" width="80"  align="center" sortable>
                <template #default="scope">
                    <el-icon v-if="scope.row.status=='Active'" color="green"><Check/></el-icon>
                    <el-icon v-else color="red"><Close/></el-icon>
                </template>
            </el-table-column>
            <el-table-column fixed prop="version" align="center" label="集群规模" width="100"/>

            <el-table-column fixed="right" label="操作" min-width="50">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="edit(scope.row.clusterId)">编辑</el-button>
                    <el-button link type="warning" size="small" @click="deleteCluster(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
                <!-- 尾部布局 -->
        <div v class="auto-space-between" style="margin-top: 10px;">
            <div></div>
            <!-- <div>总数：{{ items.length }}</div> -->
        </div>
    </el-card>
    <el-dialog
    destroy-on-close
    @close="closeDialog"
    v-model="addUserDialog"
    :title="defaultMethod == 'Create'? '添加集群': '更新集群'"
    width="70%"
    >
        <Add :item-form="itemForm" :method="defaultMethod" @rollback="rollback()"></Add>
    </el-dialog>
    <el-dialog
    draggable
    destroy-on-close
    v-model="detailDialog"
    center
    width="70%">
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <div :id="titleId" :class="titleClass">
            <el-button type="primary" size="large" title="集群ID">
                <i class="iconfont icon-k8s" style="font-size: 20px"/>
                <span style="font-size: 20px;margin-left: 10px;">{{ detailId }}</span>
            </el-button>
          </div>
        </div>
      </template>
      <div class="auto-layout">
        <div v-for="item in clusterDetail" :key="item.resourceType">
          <el-card style="width:320px;">
            <template #header>
              <span>{{ item.resourceType }}</span>
            </template>
            <div>
              <div class="auto-space-between">
                <el-icon :size="50">
                  <i :class="`iconfont icon-${item.resourceType.toLowerCase()}`" style="font-size: 40px;"/>
                </el-icon>
                <router-link :to="{
                  path: '/'+item.resourceType.toLowerCase()+'/list',
                  query: {clusterId: detailId}
                  }">{{ item.total }}</router-link>
              </div>
            </div>
          </el-card>
        </div>
      </div>

    </el-dialog>


</template>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.text {
    font-size: 14px;
}
.item {
    margin-bottom: 18px;
}
</style>
